import React, { useState, useEffect } from 'react'
import "./Vouchers.css"
import { Space } from 'react-vant'
import { Down } from '@react-vant/icons'
import axios from "../../utils/index"
import { Checkbox } from 'antd';
import { sleep } from 'antd-mobile/es/utils/sleep'
import { Button, Toast } from 'antd-mobile'
import { useNavigate, useLocation } from "react-router-dom"
import DeepCopy from './DeepCopy'

export default function Vouchers() {
    const location = useLocation()
    const navigate = useNavigate()
    const [data, setData] = useState([])
    const [ids, setIds] = useState([])
    console.log(ids);
    const [show, setShow] = useState(false)
    const [add, setAdd] = useState(false)
    const [addText, setAddText] = useState("")
    const [newState, setNewState] = useState(DeepCopy({}, JSON.parse(localStorage.getItem("data"))))

    useEffect(() => {
        setNewState({ ...newState, text: "" })
        localStorage.setItem("data", JSON.stringify(newState))
    }, [])
    const [showId, setShowid] = useState("")





    const getAll = async () => {
        let list = await axios.get("/getVou")
        if (list.code === 200) {
            setData(list.list.sort((a, b) => new Date(b.time) - new Date(a.time)))
        }
    }
    const onChange = (e, id) => {
        if (e.target.checked) {
            setIds([...ids, id])
        } else {
            setIds(ids.filter(item => item !== id))
        }
    };

    const dels = async () => {
        let list = await axios.delete("/delVou", { data: { ids: ids } })
        if (list.code === 200) {
            getAll()
        }
    }

    useEffect(() => {
        getAll()
    }, [])
    return (
        <div>
            <div className="top">
                <div className="return">
                    <span className="icon">
                        <Space gap={20}>
                            <Down className="leftIcon" onClick={() => { navigate("/cart", { state: newState }) }} />
                        </Space>
                    </span>
                    <span className="top-cart">特别优惠</span>
                </div>
                <div className="returns">
                    <span className={show == false ? "del" : "del-show"} onClick={() => { setShow(true); setAdd(false); setAddText(""), setShowid("") }}>编辑</span>
                    <span className={show == true ? "del" : "del-show"}><span style={{ padding: "0 10px" }} onClick={() => { setShow(false); window.history.go(0) }}>取消</span></span>
                </div>
            </div>
            <div className="big-box">
                {
                    data.map(item => {
                        let now = new Date()
                        return <div key={item._id} className={Math.ceil((new Date(item.time) - now) / (1000 * 60 * 60 * 24)) < 1?"locked":"farter-checked"}>
                            <Checkbox onChange={(e) => { onChange(e, item._id) }} className={show == true ? "checked" : "checked-show"} ></Checkbox>
                            <div className={showId == item._id ? "coupons-click" : "coupons"} style={{ backgroundImage: `url(${'../img/1.gif'})`, backgroundSize: "60% 120%", backgroundRepeat: "no-repeat", backgroundPosition: "140px 30px" }} onClick={!(Math.ceil((new Date(item.time) - now) / (1000 * 60 * 60 * 24)) < 1) ? () => { setAdd(true); setShowid(item._id); setAddText(item.discount); setNewState({ ...newState, text: item.discount }) } : undefined}>
                                <div className="coupons-left">
                                    <div className="coupons-left-top">
                                        <p className="coupons-p1">{item.name}</p>
                                        <p className="coupons-p2">{Math.ceil((new Date(item.time) - now) / (1000 * 60 * 60 * 24)) < 1 ? "已过期" : Math.ceil((new Date(item.time) - now) / (1000 * 60 * 60 * 24)) + "天后过期"}</p>
                                    </div>
                                    <div className="coupons-left-bottom">
                                        <p className="coupons-p3">{item.text}</p>
                                    </div>
                                </div>
                                <div className="coupons-right">
                                    <p className="coupons-p4">{item.discount}<span>折</span></p>
                                </div>
                            </div>
                        </div>
                    })
                }
            </div>
            <Button block color='primary' size='large' className={show == true ? "buttons" : "button-show"} loading='auto' loadingText='正在加载'
                onClick={async () => {
                    if (ids.length > 0) {
                        await sleep(2000)
                        dels()
                    } else {
                        Toast.show({
                            content: "至少选择一张券",
                            position: 'top',
                        })
                    }
                }}>
                删除
            </Button>
            <div className={add == true ? "button-bottom" : "button-show"}>
                <Button block color='primary' size='large' className="button" loading='auto' loadingText='正在加载'
                    onClick={async () => {
                        await sleep(2000)
                        navigate("/cart", { state: newState })
                    }}>
                    确定
                </Button>
                <Button block color='primary' size='large' className="button" loading='auto' loadingText='正在加载'
                    onClick={async () => {
                        setAddText("")
                        setShowid("")
                        setAdd(false)
                    }}>
                    取消
                </Button>
            </div>
        </div>
    )
}
